<template>
    <div id="index">
        <!-- money-amount -->
        <div class="loan-out-index-wrapper have-footer wrapper" ref='content'>
            <div class="loan-out-index-box">
                <!-- 首页图片的轮播 -->
                <div class="banner-box" v-if='bannerList.length'>
                    <slide
                        swiperId='banner'
                        :loop='false'
                        :autoplay='3000'>
                       <!--  <div class='banner__item' v-for='item in bannerList'>
                           <img :src="item.adImg">
                       </div> -->
                        <div class='banner__item' >
                            <img src="../images/banner1.jpg">
                        </div>
                    </slide>
                </div>
                <div class="banner-box" style='width:100%;padding-top:50%;' v-else></div>
                <div class="loan-card">
                        
                        <!-- v-if='info.loanStatus >= 10 && info.loanStatus < 30' -->

                     <span class="status" v-if='info.loanStatus >= 10 && info.loanStatus < 30'>审核中</span>
                      
                      <span class="status red" v-if='info.loanStatus <= -1 || info.authStatus <= -1'>未通过</span>

                  <span class="status"    
                       v-if='info.loanStatus == 30'>放款中</span>
                   <p class='name'>借款金额</p>
                    <!-- 借款金额轮播图 -->
                    <slide
                        v-if='loanInfo.applyAmounts && loanInfo.applyAmounts.length > 1'
                        :slidesPerView='3'
                        :initialSlide='1'
                        swiperId='applyAmounts'
                        centeredSlides='center'
                        slideToClickedSlide
                        :loop='false'
                        :autoplay='0'>
                        <div class='amount__item' v-for='item in loanInfo.applyAmounts'>
                            <h1 class='amount'>{{item | toYuan('int')}}<i></i></h1>
                        </div>
                    </slide>
                    <div class='amount__item active' 
                        v-for='item in loanInfo.applyAmounts'
                        v-if='loanInfo.applyAmounts && loanInfo.applyAmounts.length == 1'>
                        <h1 class='amount'>{{item | toYuan('int')}}<i></i></h1>
                    </div>
                    <ul class='loan-info'>
                        <li class="loan-info__item">
                            <span>借款周期</span>
                            <p>{{loanInfo.days || placeholder}}天</p>
                        </li>
                        <li class="loan-info__item" v-if='loanInfo.serviceAmount'>
                            <span>服务费+利息</span>
                            <p>{{loanInfo.serviceAmount | toYuan}}元</p>
                        </li>
                        <!-- <li class="loan-info__item" v-else>
                            <span>服务费+利息</span>
                            <p>{{(loanInfo.applyAmount * loanInfo.serviceCharge / 1000) | toYuan}}元</p>
                        </li> -->
                        <li class="loan-info__item" v-if='loanInfo.serviceAmount'>
                            <span>到账金额</span>
                            <p>{{(loanInfo.applyAmount - loanInfo.serviceAmount) | toYuan}}元</p>
                        </li>
                        <!-- <li class="loan-info__item" v-else>
                            <span>到账金额</span>
                            <p>{{(loanInfo.applyAmount - (loanInfo.applyAmount * loanInfo.serviceCharge / 1000)) | toYuan}}元</p>
                        </li> -->
                    </ul>
                    <div class="button" v-if='info.authStatus === 0 ' @click='goRouter("auth"),log("c_loan")'>立即借款</div>
                    <div class="button" v-if='info.authStatus > 0 && info.loanStatus === 0 ' @click='goRouter("apply"),log("c_loan")'>立即借款</div>
                    <div class="button" v-if='info.loanStatus === 40 ' @click='tips(),log("c_loan")'>立即借款</div>
                    <div class="button transparent" 
                        v-if='info.loanStatus >= 10 && info.loanStatus <= 30' @click='goRouter("check"),log("c_query")'>
                        查看审查进度
                    </div>
                    <div class="reject-reason" v-if='info.loanStatus <= -1'>
                        <span class='icon'><img src="../images/fail@3x.png" width="32"></span>
                        <div class='text'>
                            <p>{{loanInfo.checkMsg}}</p>
                            <p v-if='loanInfo.nextLoanTime'>{{loanInfo.nextLoanTime | dateFormat}}可再次申请</p>
                        </div>
                    </div>
                    <div class="reject-reason" v-if='info.loanStatus > -1 && info.authStatus <= -1'>
                        <span class='icon'><img src="../images/fail@3x.png" width="32"></span>
                        <div class='text'>
                            <p>{{authInfo.checkMsg}}</p>
                            <p v-if='authInfo.nextAuthTime'>{{authInfo.nextAuthTime | dateFormat}}可再次申请</p>
                        </div>
                    </div>
                    <div class="tips">
                        <template v-if='!configInfo.lendWarnWord'>
                            <p>＊须年满21周岁 <!-- ＊仅支持iPhone6S及以上机型 --></p> 
                        </template>
                        <template v-else>
                            <p>{{configInfo.lendWarnWord}}</p>
                        </template>
                    </div>
                </div>
                <ul class="button-bar">
                    <li class="button-item" @click='goRouter("help"),log("c_help",info.loanStatus)'>
                        <img src="../images/help.png">
                        <p>使用帮助</p>
                    </li>
                    <li class="button-item" @click='goService'>
                        <img src="../images/tel.png" alt="">
                        <p>联系客服</p>
                    </li>
                </ul>
            </div>
        </div>

        <footer-bar></footer-bar>
        <!-- 登录组件 -->
        <login
            :show='showLogin'
            @finish='getConfig'
            @showAgreement='show_agreement = true'
            @close='showLogin = false'></login>

        <agreement
            :show='show_agreement'
            type='register'
            @close='show_agreement=false'></agreement>


        <modal
            class='modal-success'
            :closeButton='true'
            :maskClose='false'
            @close='show_modal_android = false'
            :show='show_modal_android'>
            <img src="../images/img_market.png" width="96">
            <p>海量借款平台</p>
            <span>轻松借款，超低门槛</span>
            <div class="button transparent" @click='goFinanceMarket'>即将进入贷款超市 {{second}}s..</div>
        </modal>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import agreement from '../components/Agreement.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import countDown from '../components/CountDown.vue'
    import slide from '../components/Slide.vue'
    import toYuan from '../filters/filter-toYuan'
    import login from '../components/Login.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import { timeToHours } from '../filters/filter-timeFormat'
    import { convertRequestURL } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, contactApi, loanOutApi, messageApi, indexApi } from '../api/api'
    import { scrollLoading, scrollLoadingOff, getOS } from '../utils/utils'
    import moment from 'moment'

    export default {
        components:{
            login,
            footerBar,
            agreement,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            pickerList,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            slide,
            buttonLoading,
            pagination,
            payPassword,
            countDown,
        },
        filters:{
            toYuan,
            dateFormat,
            timeToHours,
            diffDay(time){
                let now = moment()
                let day = moment(time)
                let diff = day - now
            },
            toYuanInt(money){
                if(money === 0) return '0'
                else if(!money) return '0'
                else if(money >= 1000000){
                    return Number((money/1000000).toFixed(2)) + '万'
                }
                else return Number((money/100).toFixed(2))
            }

        },
        data() {
            return {
                index:0,
                info:{},
                loanInfo:{},
                authInfo:{},
                second:3,
                showLogin:false,
                loading_switch:false,
                bannerList:[],
                payPasswordShow:false,
                show_modal_borrow:false,
                show_modal_android:false,
                show_agreement:false,
                placeholder:'--',
                userCount:'',
                info:{},
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            configInfo(){
                return this.localInfo.configInfo || {}
            },
            serviceUrl(){
                let href
                if(this.configInfo.serviceCall){
                    href = `tel:${this.configInfo.serviceCall}`
                }
                else{
                    href = this.configInfo.serviceUrl
                }
                return href
            },
            sessionId(){
                return this.localInfo.sessionId
            },
            userInfo(){
                return this.localInfo.userInfo
            },
            needLogin(){
                return this.localInfo.needLogin
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
            ]),

            // filters

            // function
            log(eventName,eventLabel){
                let eventParams = {}
                if(eventLabel){
                    eventParams = {
                        e_n:eventName,
                        e_v:{
                            value:eventLabel
                        }
                    }
                }
                else{
                    eventParams = {
                        e_n:eventName
                    }
                }
                return allApi.log(eventParams)
            },
            //进入进款平台
            goFinanceMarket(){
                location.href = 'https://sdzz-h5-rt.fqgj.net?channel=lxbjksdzz0606xy'
            },
            delayHandle(){
                this.second = 3
                this.countDown(()=>{
                    this.goFinanceMarket()
                })
            },
            countDown(callback){
                const time = setTimeout(()=>{
                    if(this.second == 1){
                        callback && callback()
                        return
                    }
                    this.second --
                    this.countDown(callback)
                },1000)
            },
            // 跳转联系客服
            goService(){
                let timeout = true
                this.log('c_customer')
                .then(result=>{
                    timeout = false
                    location.href = this.serviceUrl
                })
                .catch(error=>{
                    timeout = false
                    location.href = this.serviceUrl
                })
                setTimeout(()=>{
                    if(timeout){
                        location.href = this.serviceUrl
                    }
                },3000)
            },
            goRouter(name){
                if(getOS() == 'Android' && !this.configInfo.supportCashLoan){
                    this.show_modal_android = true
                    this.delayHandle()
                    return
                }

                if(!this.checkLogin()) return

                this.$router.push({
                    name:name
                })
            },
            tips(){
                this.setMsgTip({
                    text:'还有未结清的欠款，暂时无法借款',
                    type:'warn'
                })
            },
            goLoan(){
                if(this.info.authStatus === 0){
                    this.$router.push({
                        name:'auth'
                    })
                    return
                }
                this.$router.push({
                    name:'apply'
                })
            },
            checkLogin(){
                if(!this.sessionId){
                    if(getOS() == 'Android' && !this.configInfo.supportCashLoan){
                        this.show_modal_android = true
                        this.delayHandle()
                        return
                    }
                    this.showLogin = true
                    return false
                }
                return true
            },
            getConfig(){
                this.showLoading()
                indexApi.appConfigData()
                .then(result=>{
                    result.loanRecord.applyAmount = result.loanRecord.applyAmounts[0]
                    this.info = result
                    this.loanInfo = result.loanRecord
                    this.authInfo = result.authProgress
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            getAdlist(){
                indexApi.adList({
                    locates:'ad01'
                })
                .then(result=>{
                    this.bannerList = result.ad01
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            }
        },
        created(){
            this.getConfig()
            this.getAdlist()
        },
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #index{
        .loan-card{
            z-index:2;
            text-align: center;
            margin: 16px;
            margin-top: -40px;
            background-color: #fff;
            border-radius:4px;
            padding: 24px 16px;
            box-shadow:0 0 4px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,4,8,0.12);
            position: relative;
            .status{
                @extend %font-caption;
                position: absolute;
                right:0;
                top:20px;
                color:#fff;
                background-color: $orange;
                border-radius:12px 0 0 12px;
                padding: 2px 17px;
                &.red{
                    background-color: $red;
                }
            }
            .name{
                @extend %font-body1;
            }
        }
        .loan-info{
            padding-top: 16px;
            display: flex;
            text-align: center;
        }
        .loan-info__item{
            width: 30%;
            flex:1;
            @extend %font-caption;
            padding-bottom: 16px;
            p{
                padding-top: 4px;
                color:$importColor;
                @extend %font-title;
            }
        }
        .button-bar{
            display: flex;
            padding-top: 16px;
        }
        .button-item{
            position: relative;
            width: 20%;
            flex:1;
            text-align: center;
            &:after{
                content:'';
                position: absolute;
                right:0;
                border-right: 1px solid $sectionColor;
                top:8px;
                bottom:28px;
            }
            &:last-child:after{
                display: none;
            }
            img{
                width: 48px;
                height: 48px;
            }
            p{
                @extend %font-caption;
                padding-top: 8px;
            }
        }
        #applyAmounts{
            border-bottom: 1px solid $sectionColor;
            padding-bottom: 8px;
        }
        .amount__item{
            width: (100%/3);
            &.swiper-slide-active,&.active{
                .amount{
                    font-size: 45px;
                    color:$blue;
                    font-weight: normal;
                }
            }
            &.active{
                margin:0 auto;
            }
        }
        .amount{
            transition:all ease 200ms;
            color:$importColor;
            font-size: 25px;
            font-weight: 300;
            line-height: 68px;
            i{
                @extend %font-body1;
            }
        }
        .reject-reason{
            display: flex;
            justify-content: center;
            align-items: center;
            padding:9px 10px;
            background-color: $backgroundColor;
            .icon{
                display: block;
                width: 32px;
            }
            .text{
                padding-left: 8px;
                @extend %font-caption;
            }
        }
        .tips{
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            padding-top: 10px;
            .iconfont{
                font-size: 11px;
            }
            p{
                line-height: 1.3;
                padding: 0 22px;
            }
        }
        .modal-success{
            text-align: center;
            p{
                padding-top: 8px;
                @extend %font-button;
                color:$importColor;
            }
            span{
                padding-top: 16px;
                display: block;
                @extend %font-body1;
            }
            .button{
                margin-top: 30px;
            }
        }
    }
    body .result-info__key{
        color:#333;
    }
</style>
